<!--
*** Created by zhumin on 2023/10/21.***
*** Description: "大屏滚动"
-->
<template>
  <div>
    <div class="screen" v-if="!showHomePage">
      <div class="screen-top">
        <div class="left-logo">
          <img src="../../assets/img/screen/screen-left-logo.png" alt="" srcset="" height="78px" />
        </div>
        <div class="screen-info">
          <div
            class="single-item"
            style="border:none"
            v-for="(item, index) in screenData.showItemInfo"
            :key="index"
          >
            <template>
              <div style="font-size:22px">{{ item.name }}</div>
              <div class="item-logo">
                <img :src="item.logo" alt="" />
              </div>
            </template>
          </div>
          <div class="single-item-info">
            <div class="info-line1">
              <div>{{ screenData.gameTitle }}</div>
              <div class="venue">{{ screenData.venueName }}</div>
            </div>
            <div class="info-line2">
              <div class="report-name">{{ screenData.reportName }}</div>
              <div>{{ screenData.gameTime }}</div>
            </div>
          </div>
        </div>
        <div class="right-logo">
          <img src="../../assets/img/screen/right-logo.png" alt="" srcset="" height="80px" />
        </div>
      </div>
      <div
        v-if="
          typeCode === 'MSGO01' ||
            typeCode === 'MSGO02' ||
            typeCode === 'MRGO01' ||
            typeCode === 'MRGO02' ||
            typeCode === 'MRGO03'
        "
      >
        <div class="game-info">
          <div style="width:150px">{{ tableData.column1 }}</div>
          <div class="game-a" style="width: calc(50% - 150px)">{{ tableData.column2 }}</div>
          <div class="game-vs" style="width:150px">{{ tableData.column3 }}</div>
          <div class="game-b" style="width: calc(50% - 150px)">{{ tableData.column4 }}</div>
        </div>
      </div>
      <div v-if="typeCode === 'MSGO08' || typeCode === 'MSGO03'" class="game-info">
        <div style="width:300px">{{ tableData.column25 }}</div>
        <div class="game-a" style="width: calc(50% - 225px)">{{ tableData.column26 }}</div>
        <div class="game-vs" style="width:150px">{{ tableData.column27 }}</div>
        <div class="game-b" style="width: calc(50% - 225px)">{{ tableData.column28 }}</div>
      </div>
      <div
        class="game-info"
        v-if="
          typeCode === 'MSCC01' ||
            typeCode === 'MSCC02' ||
            typeCode === 'MRCC01' ||
            typeCode === 'MRCC02'
        "
      >
        <div style="width:150px">{{ tableData.column5 }}</div>
        <div class="game-a" style="width: calc(50% - 175px)">{{ tableData.column6 }}</div>
        <div class="game-vs" style="width:200px">{{ tableData.column7 }}</div>
        <div class="game-b" style="width: calc(50% - 175px)">{{ tableData.column8 }}</div>
      </div>
      <div
        class="game-info"
        v-if="
          typeCode === 'MSCH01' ||
            typeCode === 'MSCH02' ||
            typeCode === 'MRCH01' ||
            typeCode === 'MRCH01'
        "
      >
        <div style="width:150px">{{ tableData.column9 }}</div>
        <div class="game-a" style="width: calc(50% - 175px)">{{ tableData.column10 }}</div>
        <div class="game-vs" style="width:200px">{{ tableData.column11 }}</div>
        <div class="game-b" style="width: calc(50% - 175px)">{{ tableData.column12 }}</div>
      </div>

      <!-- 五子棋 -->
      <div
        class="game-info"
        v-if="
          typeCode === 'MSGB01' ||
            typeCode === 'MSGB02' ||
            typeCode === 'MRGB01' ||
            typeCode === 'MRGB02' ||
            typeCode === 'MRGB03'
        "
      >
        <div style="width:150px">{{ tableData.column13 }}</div>
        <div class="game-a" style="width: calc(50% - 175px)">{{ tableData.column14 }}</div>
        <div class="game-vs" style="width:200px">{{ tableData.column15 }}</div>
        <div class="game-b" style="width: calc(50% - 175px)">{{ tableData.column16 }}</div>
      </div>

      <!-- 国际跳棋 -->
      <div
        class="game-info"
        v-if="
          typeCode === 'MSDR01' ||
            typeCode === 'MSDR02' ||
            typeCode === 'MRDR01' ||
            typeCode === 'MRDR02'
        "
      >
        <div style="width:150px">{{ tableData.column17 }}</div>
        <div class="game-b" style="width: calc(50% - 175px)">{{ tableData.column18 }}</div>
        <div class="game-vs" style="width:200px">{{ tableData.column19 }}</div>
        <div class="game-a" style="width: calc(50% - 175px)">{{ tableData.column20 }}</div>
      </div>

      <!-- 掼蛋 -->
      <div class="game-info" v-if="typeCode === 'MSWE01' || typeCode === 'MRWE01'">
        <div style="width:150px">{{ tableData.column21 }}</div>
        <div class="game-a" style="width: calc(50% - 75px)">{{ tableData.column22 }}</div>
        <div class="game-b" style="width: calc(50% - 75px)">{{ tableData.column24 }}</div>
      </div>
      <div class="scroll_table">
        <div
          style="display: inline-block; width: 100%"
          v-if="
            screenData.reportName === '名次公告' || screenData.reportName === '获奖名单'
              ? rankData.length > 6
                ? true
                : false
              : reportData.length > 6
              ? true
              : false
          "
        >
          <el-table
            :data="
              screenData.reportName === '名次公告' || screenData.reportName === '获奖名单'
                ? rankData
                : reportData
            "
            class="table"
            :row-class-name="tableRowClassName"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            style="width: 100%"
          >
            <el-table-column
              v-for="(child, num) in columns"
              :key="num + 'j'"
              :label="child.label"
              :prop="child.prop"
              :width="child.minWidth"
            />
            <!-- <template v-for="(item, num) in columns">
            <el-table-column :key="num" :label="item.label" :prop="item.prop" />
          </template> -->
          </el-table>
          <vue-seamless-scroll
            :data="
              screenData.reportName === '名次公告' || screenData.reportName === '获奖名单'
                ? rankData
                : reportData
            "
            class="seamless-warp"
            style="width:100%;overflow: auto;"
            :class-option="classOption"
          >
            <el-table
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :data="
                screenData.reportName === '名次公告' || screenData.reportName === '获奖名单'
                  ? rankData
                  : reportData
              "
              class="table_scroll"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(child, num) in columns"
                :key="num + 'i'"
                :label="child.label"
                :prop="child.prop"
                :width="child.minWidth"
              />
            </el-table>
          </vue-seamless-scroll>
        </div>
        <div style="display: inline-block; width: 100%" v-else>
          <el-table
            :data="
              screenData.reportName === '名次公告' || screenData.reportName === '获奖名单'
                ? rankData
                : reportData
            "
            :row-class-name="tableRowClassName"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            style="width: 100%"
          >
            <el-table-column
              v-for="(child, num) in columns"
              :key="num + 'j'"
              :label="child.label"
              :prop="child.prop"
              :width="child.minWidth"
            />
          </el-table>
        </div>
      </div>
    </div>
    <div v-else class="screen-default"></div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Storage from '@/assets/js/storage'
import Report from '@/assets/js/report'

export default {
  name: 'ScrollTable',
  created() {
    this.sportName = this.$route.sportName || '围棋'
    this.getTableData()
    this.realTimeGetData()
  },
  data() {
    return {
      showHomePage: false,
      columns: [],
      // typeCode: 'MRWE03',
      typeCode: '',
      tableData: {
        column1: '对阵',
        column2: '黑棋',
        column3: 'VS',
        column4: '白棋',

        column5: '对阵',
        column6: '红方',
        column7: '当前成绩',
        column8: '黑方',

        column9: '对阵',
        column10: '白方',
        column11: '当前成绩',
        column12: '黑方',

        column13: '对阵',
        column14: '黑方',
        column15: '当前成绩',
        column16: '白方',

        column17: '对阵',
        column18: '白方',
        column19: '当前成绩',
        column20: '黑方',

        column21: '对阵',
        column22: '东西向',
        column24: '南北向',

        column25: '对阵',
        column26: 'A方',
        column27: 'VS',
        column28: 'B方'
      },
      sceenTopData: {
        sportName: '围棋',
        gameTitle: '专业男子个人 第二轮结束综合成绩公告（截至第二轮）',
        venueName: '合肥融创永乐半山酒店',
        gameTime: '16:00',
        reportName: '成绩公告'
      },
      timer: null,
      showItemInfo: [],
      itemInfoList: {
        围棋: [
          {
            name: '围棋',
            logo: require('../../assets/img/daily/GO.png'),
            flag: true
          }
        ],
        象棋: [
          {
            name: '象棋',
            logo: require('../../assets/img/daily/CC.png'),
            flag: false
          }
        ],
        国际象棋: [
          {
            name: '国际象棋',
            logo: require('../../assets/img/daily/CH.png'),
            flag: false
          }
        ],
        桥牌: [
          {
            name: '桥牌',
            logo: require('../../assets/img/daily/BR.png'),
            flag: false
          }
        ],
        五子棋: [
          {
            name: '五子棋',
            logo: require('../../assets/img/daily/GB.png'),
            flag: false
          }
        ],
        国际跳棋: [
          {
            name: '国际跳棋',
            logo: require('../../assets/img/daily/DR.png'),
            flag: false
          }
        ]
      },
      tableList: [
        {
          GROUP: 'A',
          TABLE: '1',
          NUMBER_B: '1',
          NAME_B: '李轩豪 ',
          SCORE_B: '2',
          UNIT_B: '重庆',
          SCORE_W: '0',
          NUMBER_W: '2',
          NAME_W: '李建宇 ',
          UNIT_W: '河北'
        },
        {
          GROUP: '',
          TABLE: '2',
          NUMBER_B: '3',
          NAME_B: ' 韦一博 ',
          SCORE_B: '2',
          UNIT_B: '厦门',
          SCORE_W: '0',
          NUMBER_W: '4',
          NAME_W: ' 张家尧 ',
          UNIT_W: '内蒙古'
        },
        {
          GROUP: '',
          TABLE: '3',
          NUMBER_B: '5',
          NAME_B: ' 张  强 ',
          SCORE_B: '2',
          UNIT_B: '西藏',
          SCORE_W: '0',
          NUMBER_W: '6',
          NAME_W: ' 王星昊 ',
          UNIT_W: '上海'
        },

        {
          GROUP: '',
          TABLE: '12',
          NUMBER_B: '23',
          NAME_B: ' 韩一洲 ',
          SCORE_B: '2',
          UNIT_B: '北京',
          SCORE_W: '0',
          NUMBER_W: '24',
          NAME_W: '王音灵水',
          UNIT_W: '新疆'
        },
        {
          GROUP: '',
          TABLE: '13',
          NUMBER_B: '25',
          NAME_B: ' 徐泽鑫 ',
          SCORE_B: '0',
          UNIT_B: '煤矿体协',
          SCORE_W: '2',
          NUMBER_W: '26',
          NAME_W: ' 李钦诚 ',
          UNIT_W: '浙江'
        },
        {
          GROUP: '',
          TABLE: '14',
          NUMBER_B: '27',
          NAME_B: ' 程宏昊',
          SCORE_B: '2',
          UNIT_B: '广东',
          SCORE_W: '0',
          NUMBER_W: '28',
          NAME_W: ' 张亚博',
          UNIT_W: '陕西'
        },
        {
          GROUP: 'B',
          TABLE: '1',
          NUMBER_B: '1',
          NAME_B: '陈梓健 ',
          SCORE_B: '2',
          UNIT_B: '山东',
          SCORE_W: '0',
          NUMBER_W: '2',
          NAME_W: '冯  昊 ',
          UNIT_W: '河北'
        },
        {
          GROUP: '',
          TABLE: '2',
          NUMBER_B: '3',
          NAME_B: ' 陈  浩 ',
          SCORE_B: '0',
          UNIT_B: '西藏',
          SCORE_W: '2',
          NUMBER_W: '4',
          NAME_W: ' 时  越 ',
          UNIT_W: '上海'
        }
      ]
    }
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum:
          this.screenData.reportName === '名次公告' ? this.rankData.length : this.reportData.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        switchOffset: 30,
        autoPlay: true,
        navigation: false,
        switchSingleStep: 134,
        switchDelay: 400,
        switchDisabledClass: 'disabled',
        isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量
      }
    },
    ...mapState({
      screenData: state => state.schedule.screenData,
      reportData: state => state.schedule.reportData,
      rankData: state => state.schedule.rankData
    })
  },
  watch: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else if (rowIndex % 2 === 0) {
        return 'success-row'
      }
      return ''
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return ''
      }
    },
    getTableData() {
      this.$store
        .dispatch('getScreenData')
        .then(res => {
          this.showItemInfo = this.itemInfoList[this.screenData.sportName]
          if (this.screenData.reportName === '名次公告') {
            this.getRankData()
          } else {
            this.getReportData()
          }
          this.showHomePage = false
        })
        .catch(error => {
          this.showHomePage = true
          console.log(error)
        })
    },
    getReportData() {
      this.$store
        .dispatch('getReportData', this.screenData.fileName + '.txt')
        .then(res => {
          this.typeCode = res.Code
          this.columns = Report[this.typeCode]
          this.showHomePage = false
        })
        .catch(error => {
          this.showHomePage = true
          console.log(error)
        })
    },
    getRankData() {
      this.$store
        .dispatch('getRankData', this.screenData.sportCode + '/Data.json')
        .then(_ => {
          this.columns = Report[this.typeCode]
          console.log(this.rankData)
          this.showHomePage = false
        })
        .catch(error => {
          this.showHomePage = true
          console.log(error)
        })
    },
    clearIntervalTime() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    realTimeGetData() {
      this.clearIntervalTime()
      this.timer = setInterval(() => {
        this.getTableData()
      }, 1000 * 60 * 5)
    }
  },
  beforeDestroy() {
    this.clearIntervalTime()
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/screen.scss';
</style>

<style lang="scss" scoped>
::v-deep {
  .el-table .warning-row {
    background-image: linear-gradient(-225deg, #16afc6 0%, #1d8fe1 48%, #625eb1 100%);
    color: #fff;
  }

  .el-table .success-row {
    background-image: linear-gradient(to top, #68ccb6 0%, #b4cfed 100%);
    color: #000;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: transparent;
  }

  .el-table thead {
    font-size: 18px;
    height: 60px;
    background: #000;
    color: #4adaff;
    font-weight: 500;
  }
  .el-table .el-table__header-wrapper th {
    background: #000;
  }
  .el-table__header-wrapper th {
    font-size: 18px;
    height: 60px;
    background: #000;
    color: #4adaff;
    font-weight: 500;
  }

  .el-table td,
  .el-table th.is-leaf {
    border: none !important;
  }

  .el-table th > .cell {
    border: none;
    line-height: auto;
    height: auto;
  }

  .el-table__body {
    width: 100% !important;
  }
}
.seamless-warp {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
</style>
